<template>
<div class="padding10">
  <div v-if="showSurvey === false && showResult === false">
    <div class="clearfix padding10">
      <div class="info-box pull-left width50 pointer" v-for="(item, key) in questionnaireList" v-on:click="setQuestionnaire(item,$event)">
          <span class="info-box-icon"><i class="fa fa-file-text-o"></i></span>
          <div class="info-box-content">
            <h4 class="info-box-text">{{ item.suName }}</h4>
            <span>{{ item.description }}</span>
          </div>
      </div>
    </div>
    <!-- div>
      <button id="nextBtn" disabled="disabled" type="button" class="btn btn-custom" v-on:click="startAnswer()">下一步</button>
    </div -->
  </div>
  <div v-else-if="showSurvey === true && showResult === false">
    <answerQuestionnaire
    assessType='personnel'
    :personnel="personnelData"
    :questionnaireData="selectQuestionnaireData"
    @showAssessmentResult="showAssessmentResult"></answerQuestionnaire>
  </div>
  <div v-else-if="showResult === true">
    <assessmentResult :personnel="personnelData" :assessmentData="resultData"></assessmentResult>
  </div>
</div>
</template>
<script>
import answerQuestionnaire from './answerQuestionnaire.vue'
import assessmentResult from './assessmentResult.vue'

export default {
  name: 'newAssessment',
  data () {
    return {
      questionnaireList: [],
      selectQuestionnaireData: {},
      // 显示调查问卷
      showSurvey: false,
      // 显示评估结果
      showResult: false,
      resultData: {}
    }
  },
  props: {
    // 人员信息详情
    personnelData: {
      type: Object,
      default: {}
    }
  },
  watch: {
    // 监听参数变化
    personnelData: {
      handler: function(val) {
        if (this.questionnaireList.length === 0) this.getQuestionnaireList()
        this.clearAll()
      },
      // 深度观察
      deep: true
    }
  },
  components: {
    answerQuestionnaire,
    assessmentResult
  },
  methods: {
    // 检查离线调查，如果存在未完成的离线调查，则自动显示调查试卷
    checkLocalStorage () {
      if (localStorage.getItem("currentAssessment")) {
        let storageData = JSON.parse(localStorage.getItem("currentAssessment"))
        this.selectQuestionnaireData = storageData.questionnaireData
        this.showSurvey = true
      }else{
        if (this.questionnaireList.length === 0) this.getQuestionnaireList()
      }
    },
    clearLocalStorage () {
      localStorage.removeItem('currentAssessment')
      // localStorage.clear()
    },
    clearAll () {
      this.showSurvey = false
      this.showResult = false
      this.selectQuestionnaireData = {}
      this.resultData = {}
      this.clearLocalStorage()
    },
    closeThis () {
      this.clearAll()
      this.$emit('closeDialog')
    },
    showAssessmentResult (resultData) {
      this.showSurvey = false
      this.selectQuestionnaireData = {}
      this.resultData = resultData
      this.showResult = true
      this.clearLocalStorage()
    },
    getQuestionnaireList () {
      // listSurvey
      this.$http.get('findSurveysByOrgId').then(
        response => {
          this.questionnaireList = response.data.data
        }        
      )
    },
    // 获取试卷详细数据
    getQuestionnaireData (id) {
      let htmlBody = '<div class="textCenter"><i class="el-icon-loading middle largerFont"></i><span class="middle">数据加载中...</span></div>'
      this.$alert(htmlBody, '加载数据', true)
      this.selectQuestionnaireData = {}
      $("#nextBtn").attr("disabled","disabled")
      this.$http.get('getSurveyQuDetail?suId=' + id).then(
        response => {
          this.selectQuestionnaireData = response.data.data
          $("#nextBtn").removeAttr("disabled")
          this.startAnswer()
          this.$alert('', '', false)
        }
      )
    },
    // 选择问卷
    setQuestionnaire (item, event) {
      $('.info-box').removeClass('active')
      event.currentTarget.classList.add('active')
      this.getQuestionnaireData(item.id)
    },
    // 开始答题
    startAnswer () {
      if (!this.personnelData.id || this.personnelData === '' || this.personnelData.id === null) {
        alert('未选择被调查人员！')
        return false
      }
      if (!this.selectQuestionnaireData.id || this.selectQuestionnaireData === '' || this.selectQuestionnaireData.id === null) {
        alert('请选择问卷')
        return false
      }
      this.Title = "问卷测试"
      this.showSurvey = true
    }
  },
  beforeCreate () {},
  created () {
    this.checkLocalStorage()
  },
  beforeMount () {},
  mounted () {},
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
